<template>
<div class="kehulist_page">
   <van-nav-bar
  title="客户列表信息"
  right-text="新增"
  left-arrow
  @click-left="onClickLeft"
/>

<!-- 按钮 -->
<van-search
  v-model="value"
  show-action
 shape="round"
  placeholder="客户名称/联系方式"
>
  <template #action>
    <div :style="{color:col1,fontSize:'16px'}">搜索</div>
  </template>
</van-search>

<!-- 信息内容 -->
<div class="box" v-for="item in dataArr" :key="item.id" @click="tokuhu(item.id)">
    <div class="top">
        <div class="row">
            <p>客户名称</p>
            <p>{{item.custName}}</p>
        </div>
        <div class="row">
            <p>联系方式</p>
            <p>{{item.telephone}}</p>
        </div>
     
        <div class="row">
            <p>公司名称</p>
            <p>{{item.company}}</p>
        </div>

           <div class="row">
            <p>职务</p>
            <p>{{item.position}}</p>
        </div>   
    </div>

    <div class="down">
        <div class="btn">新增拜访</div>
         <div class="btn">拜访记录</div>
    </div>



</div>


</div>
</template>

<script>
import {KehuInfoApi} from '../request/api'
export default {
    data(){
        return {
            value:'',
            col1:'#039',
            dataArr:[],
        }
    },
    created(){
        KehuInfoApi({
            keyword:1,
            current:2,
            size:7,
        }).then(res=>{
            console.log(res);
            this.dataArr = res.data.records
        })
    },
    methods:{
        onClickLeft(){
            this.$router.back()
        },

        tokuhu(id){
            this.$router.push('/mykehu/'+id)
        }
    }

}
</script>

<style lang="less" scoped>
.kehulist_page{
    width: 100vw;
    height: 100%;
    background-color: #f5f5f5;
}

.van-nav-bar{
    height: 50px;
    background-color: #039;
    /deep/.van-nav-bar__arrow{
        color: #fff;
        font-size: 22px;
    }
     /deep/.van-nav-bar__title{
            color: #fff;
            font-size: 18px;
        }

    /deep/.van-nav-bar__text{
        color: #fff;
        font-size: 18px;
    }
}

.box{
    width: 100%;
    height: 156px;
    background-color: #fff;
    margin-top: 9px;
    .top{
        width: 100%;
        height: 102px;
        padding: 16px 22px;
        box-sizing: border-box;
        .row{
            display: flex;
           p{
               font-size: 14px;
               margin-bottom: 8px;
               &:last-child{
                   margin-bottom: 0;
            
               }
               &:nth-of-type(1){
                   width: 18%;
                   margin-right: 15px;
                   font-size: 14px;
                   color: #999;
                  
               }
           }
        }
    }

    .down{
        display: flex;
        justify-content: flex-end;
        margin-top: 12px;
        .btn{
            width: 80px;
            height: 30px;
            border-radius: 15px;
            background-color: #039;
            margin-right: 15px;
            line-height: 30px;
            text-align: center;
            color: #fff;

        }
    }


}
</style>